/* 主页面样式 */

/* 文章标题 */
.title {
  width: 669px;
  z-index: 100;
  color: #7e7171;
  /* 下划线 */
  text-decoration: underline;
  font-size: 21px;
  font-family: "STHeiti";
  top: 5%;
  left: 4.8%;
  position: absolute;

  border-radius: 8px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 缩略图 */
.thumbnail {
  padding-left: 4px;
  padding-top: 3.5px;
}

/* 头像背景 */
.thumbnail-bg {
  z-index: 100;
  top: 60px;
  left: 2.8%;
  width: 93px;
  height: 93px;
  position: absolute;
  border-radius: 100%;
  background-image: linear-gradient(
    -225deg,
    #69eacb 0%,
    #eaccf8 48%,
    #6654f1 100%
  );
  background-blend-mode: normal, multiply;
}

/* 文章内容 */
.content {
  /* 下划线 */
  /* text-decoration: underline; */
  border-top: double rgb(97, 208, 233);
  border-bottom: double rgb(239, 188, 188);
  border-left: double rgb(198, 164, 223);
  border-width: 2.5px;
  backdrop-filter: blur(10px);
  padding-left: 1%;
  padding-top: 1%;
  width: 100%;
  height: 62px;
  font-size: 17.3px;
  font-family: "KaiTi";
  color: rgb(91, 80, 80);
  border-radius: 8px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  z-index: 99;
}

/* 文章内容背景 */
.content-bg {
  z-index: 99;
  border-radius: 8px;
  margin-left: 7.5%;
  width: 89.3%;
  height: 18.5px;
  background-image: linear-gradient(
    -225deg,
    #8bdedc 0%,
    #c5c1ff 56%,
    #ffbac3 100%
  );
}

/* 流量信息栏背景 */
.all-bg {
  z-index: 99;
  margin-top: 7.4%;
  border-radius: 8px;
  margin-left: 7.5%;
  width: 90%;
  height: 31.5px;
  border-top: double rgb(198, 164, 223);
  border-right: double rgb(198, 164, 223);
}

/* 文章作者 */
.author {
  z-index: 99;
  color: #757c80;
  margin-left: 1%;
  margin-top: 1%;
  font-size: 17px;
  font-family: "KaiTi";
}

/* 点赞数量 */
.praise {
  margin-left: 57%;
}

/* 评论数量 */
.comment {
  margin-left: 72%;
}

/* 浏览数量 */
.browse {
  margin-left: 86%;
}

.praise,
.comment,
.browse,
.time {
  color: rgb(183, 169, 169);
  margin-top: 0.7%;
}

.praise,
.comment,
.browse,
.time,
.thumbnail,
.content,
.author,
.content {
  z-index: 99;
  position: absolute;
}

/* 卡片边距 */
/deep/.el-card__body,
.el-main {
  padding: 0%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

/* 循环卡片之一的盒子 */
.el-timeline-item {
  padding-bottom: 22.5%;
}

/* 内容大卡片 */
.box-card {
  /* background-color: #91d434; */
  margin-left: 5%;
  width: 750px;
  height: 160px;
  z-index: 99;
  position: absolute;
}

/* 中间页 */
.el-main {
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
}

/* 头部轮播图 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 所有按钮 */
/* /deep/.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 4px !important;
  transition: 0.1s;
  font-weight: 500;
  padding: 5%;
  font-size: 13.54px;
  border-radius: 4px;
} */

/* 左边大卡片 */
.column-card {
  margin-left: 5%;
}

/deep/.el-calendar__body {
  padding: 0%;
}

/* 博客 */
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-size: 15px;
}

/deep/.el-drawer {
  position: relative;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 10px -5pxrgba (0, 0, 0, 0.2),
    0 16px 24px 2pxrgba (0, 0, 0, 0.14), 0 6px 30px 5pxrgba (0, 0, 0, 0.12);
  overflow: hidden;
  outline: 0;
}

/* 博客分类栏 */
/deep/.classify {
  /* position: fixed; */
  width: 250px;
  height: 2040px;
  margin-top: 5%;
  margin-bottom: 5%;
  border-radius: 25px;
  /* background-color: #7c8494; */
}

/* 博客的各个分类框 */
.classifybutton {
  width: 100px;
  float: left;
}

/* 博客的后端分类框 */
.columnleft {
  float: left;
  margin-left: 5%;
}

/* 博客的后端各个分类框 */
.classify-column-left {
  margin-top: 2%;
  margin-bottom: 15%;
}

/* 博客的前端分类框 */
.columnright {
  float: right;
  margin-right: 5%;
}

/* 博客的后端各个分类框 */
.classify-column-right {
  margin-top: 2%;
  margin-bottom: 15%;
}

/* 分类栏标题分割线 */
/deep/.el-divider__text {
  position: absolute;
  background-color: #fff;
  padding: 0%;
  font-weight: 1000;
  color: #303133;
  font-size: 15px;
}

/* 分类栏尾部标题 */
/deep/.el-divider__text.is-center {
  width: 39.5%;
  /* background-color: #659dd6; */
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* 分类栏头部 */
.column-header {
  width: 220px;
  height: 287px;
  /* background-color: #333; */
}

/* 分类栏尾部美化 */
.bottom-beautify {
  width: 100%;
  /* background-color: #57f3ce; */
  /* height: 1400px; */
}

/* 左边分类栏日历 */
.el-calendar {
  margin-top: 3.5%;
  margin-left: 4%;
  font-size: 1px;
  width: 220px;
  height: 335px;
}

/deep/.el-calendar-table .el-calendar-day {
  box-sizing: border-box;
  padding: 5px;
  height: 25px;
}

/* 日历头部 */
/deep/.el-calendar__header {
  display: block;
  justify-content: space-between;
  padding: 0px;
  border-bottom: 1px solid #ebeef5;
}

/* 右边热度卡片 */
.text-right {
  font-size: 14px;
}

.item-right {
  margin-bottom: 18px;
}

.clearfix-right:before,
.clearfix-right:after {
  display: table;
  content: "";
}

.clearfix-right:after {
  clear: both;
}

/* 其他热度榜 */
.box-card-right {
  position: relative;
  margin-top: 5%;
  margin-left: 10%;
  z-index: 99;
  width: 280px;
  height: 605px;
  /* background-color: #659dd6; */
}

/* 热度榜卡片0  */
.box-card-right-top {
  position: relative;
  z-index: 99;
  width: 280px;
  margin-top: 1.1%;
  margin-left: 10%;
  height: 532px;
}

/* 公告内容 */
.announcementcontent {
  border-bottom: 1px solid#85c4cc;
}

/* 公告循环内容一段 */
.announcementfor {
  font-family: "Times New Roman", Times, serif;
  border-bottom: 4px solid#72a5ac;
}

/* 热点标题 */
.clearfix-right-host {
  color: #fff;
  /* transform: translate(-50%, -50%); */
  text-shadow: 0 4px 4px #ef3c3c;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-left: 14.5%;
}

/* 热点内容 */
.hostcontenttext {
  color: #7d7171;
  text-decoration: underline;
  font-size: 17px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 30;
  -webkit-box-orient: vertical;
}

/* 到底了提示框 */
.bottom-tip {
  text-align: center;
  font-size: larger;
  color: #99a9bf;
  border-bottom: double #b5c6dc;
  border-radius: 25px;
}

/* 到底了提示文字 */
.bottomtext {
  background: linear-gradient(#b6c0d0, #a4b7d1, #99a9bf);
  -webkit-background-clip: text;
  color: transparent;
  /* font-size: 25px; */
  /* font-weight: bold; */
}

/* 分类栏 */
.column-box-card {
}

/* 分类栏父级盒子 */
.columnbox {
  position: absolute;
  float: left;
  /* background-color: #5283b4; */
  height: 100%;
  width: 250px;
}

/* 文章父级盒子 */
.articlebox {
  /* position: absolute; */
  z-index: 99;
  float: left;
  width: 60%;
  margin-left: 16%;
  /* background-color: #e76363; */
}

/* 头部轮播图父级盒子 */
.headbox {
  margin-top: 1%;
  z-index: 100;
  position: relative;
  letter-spacing: 3px;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.3);
  padding-top: 0.5% !important;
  padding: 0 1%;
  overflow: hidden;
  border-radius: 15px;
  /* background-color: #62cd58; */
}

/* 公告父级盒子 */
.announcement {
  border-top: double #b5c6dc;
  border-bottom: double #b5c6dc;
  margin-top: 10.5%;
  margin-left: 5.4%;
  height: 220px;
  width: 85%;
  /* background-color: #a89a9a; */
  color: #355892;
  padding-top: 15px !important;
  padding-bottom: 0.01px !important;
  padding: 6px;
  font-size: 17px !important;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 14;
  -webkit-box-orient: vertical;
}

/* 热度榜父级盒子 */
.hostbox {
  /* position: absolute; */
  float: left;
  width: 22.6%;
  /* width: 19.8%; */
  /* background-color: #097a85; */
}

/* 尾部分类文章内容热度父级盒子  */
.articlehostbox {
  /* position: absolute; */
  padding-top: 1.5%;
  /* width: 1443px; */
  /* background-color: rgba(41, 38, 38, 0.4); */
  /* height: 2500px; */
  /* background-color: #77a7a3; */
}
 
/* <!-- 到底了提示父级盒子 --> */
.bottomtipbox {
  float: left;
  position: relative;
  z-index: 1;
  margin-left: 2.85%;
  margin-top: 10%;
  border-radius: 15px;
  /* background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); */
  width: 95%;
  /* background-color: #dbd0e8; */
}

/* 根节点 */
.fatherbox {
  /* background-color: rgba(41, 38, 38, 0.4); */
  margin-left: 2.85%;
  /* background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); */
  float: left;
  /* background-color: #1a2b2a; */
  width: 95%;
  /* width: 1278px; */
  /* height: 2800px; */
  /* width: 1290px; */
}

/* 热度榜头部播放图父级盒子 */
.hostphotobox {
  /* width: 50%;
  height: 100%;
  display: flex;
  background-color: #333; */
}

.host-head-text {
  color: #fff;
  position: absolute;
  top: 4.5%;
  left: 30%;
  transform: translate(-50%, -50%);
  text-shadow: 0 4px 4px #ff8800;
  font-size: 36px;
}

.host-head-text:after {
  position: absolute;
  content: attr(data-text);
  left: 0;
  color: #ff8800;
  filter: blur(20px);
  padding: 0 20px;
  z-index: -1;
}

/* 热度榜头部滑块 */
.light {
  z-index: 99;
  /* position: absolute; */
  top: 11px;
  left: 92.5%;
  transform: translate(-50%, -50%);
}

/* 热度榜头部播放图 */
.shell {
  color: #333;
  padding-left: 3.5%;
  height: 180px;
  width: 259px;
  display: flex;
}

.box {
  height: 180px;
  flex: 1;
  overflow: hidden;
  transition: 0.5s;
  margin: 0 1px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  border: 2px solid #fff;
  background-color: #fff;
}

.box > img {
  height: 88%;
  width: 450%;
  object-fit: cover;
  transition: 0.5s;
}

.box:hover {
  flex-basis: 50%;
}

.box:hover > img {
  height: 100%;
  width: 100%;
}

.box > span {
  /* font: 200 45px "优设标题黑"; */
  text-align: center;
  /* height: 100%; */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 卡片间边距 */
.el-card__body,
.el-main {
  padding: 2px !important;
}

/* 文章标题右边logo特效 */
.title-right {
  /* background-color: #66acf3; */
  width: 400px;
  height: 25px;
  z-index: 100;
  position: absolute;
  top: 24px;
  left: 83%;
  transform: translate(-50%, -50%);
}

.title-right-text {
  font-weight: bold;
  font-size: 17px;
  color: #fff;
  text-transform: uppercase;
  transform: translateY(-50%);
  text-shadow: 0px 5px 5px rgb(133, 126, 126);
  mix-blend-mode: overlay;
  /* font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: rgb(90, 72, 72);
  text-shadow: 0 1px 1px #3f4657, 0 5px 5px #6e7482; */
}

.title-right-text::before,
.title-right-text::after {
  content: "";
  padding: 9.5px 9.5px; /* 扩大内边距 */
  position: absolute;
  left: 74.5%;
  top: 63.5%;
  transform: translate(-50%, -50%);
  width: 6.8%;
  height: 6.8%;
  animation: rightroll 10s linear infinite;
}

.title-right-text::before {
  border-top: 6px solid #66acf3; /* 绘制上方右方的边框 */
  border-right: 6px solid #90aac4;
  z-index: -1; /* 将before向后调整 */
}

.title-right-text::after {
  border-bottom: 6px solid #659dd6; /* 绘制下方左方的边框 */
  border-left: 6px solid #5283b4;
  box-shadow: 0.4px 0.4px 5px #878787;
}

@keyframes rightroll {
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

/* 文章特效 */
.main {
  z-index: 99;
  opacity: 0.7;
  top: 21.5px;
  left: 7.95%;
  position: absolute;
  width: 759px;
  height: 169px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 5px;
  transition: 0.3s linear;
  background-color: #5283b4;
}

.main::before {
  content: "";
  width: 1000px;
  height: 200px;
  background: var(--c);
  position: absolute;
  z-index: 0;
  animation: roll 4s linear infinite;
  filter: blur(5px);
  transition: 0.5s linear;
}

.main::after {
  z-index: -1;
  width: 1000px;
  height: 400px;
  content: attr(data-text);
  position: absolute;
  color: var(--c);
  font-size: 25px;
  text-align: center;
  line-height: 75px;
  /* background: #333; */
  background-image: linear-gradient(
    -225deg,
    #57f3ce 0%,
    #e6b6fc 48%,
    #c5bff8 100%
  );
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 5px;
  left: 50%;
  top: 10%;
  transform: translate(-50%, -50%);
  transition: 1s linear;
}

@keyframes roll {
  100% {
    transform: rotate(360deg);
    filter: blur(5px) hue-rotate(360deg);
  }
}

.main:hover {
  opacity: 0.85;
  box-shadow: 0 0 5px var(--c), 0 0 10px var(--c), 0 0 5px var(--c);
  background: var(--c);
}

.main:hover::before {
  height: 100%;
  width: 100%;
  animation-play-state: paused;
  filter: hue-rotate(0);
}

.main:hover::after {
  background: var(--c);
  color: white;
}

/* 热度榜特效 */
.right {
  /* opacity: 0.5; */
  margin-bottom: 5%;
  position: absolute;
  margin-left: 1.9%;
  width: 289px;
  height: 541px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 5px;
  transition: 0.3s linear;
  z-index: 0;
}

.right::before {
  content: "";
  width: 200px;
  height: 700px;
  background: var(--c);
  position: absolute;
  z-index: 1;
  animation: rolls 4s linear infinite;
  filter: blur(5px);
  transition: 0.5s linear;
}

.right::after {
  content: attr(data-text);
  position: absolute;
  color: var(--c);
  font-size: 25px;
  text-align: center;
  line-height: 75px;
  /* background: #333; */
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 5px;
  width: 80%;
  height: 5%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 1s linear;
}

@keyframes rolls {
  100% {
    transform: rotate(360deg);
    filter: blur(5px) hue-rotate(360deg);
  }
}

.right:hover {
  /* opacity: 0.5; */
  box-shadow: 0 0 5px var(--c), 0 0 10px var(--c), 0 0 5px var(--c);
  background: var(--c);
}

.right:hover::before {
  height: 100%;
  width: 100%;
  animation-play-state: paused;
  filter: hue-rotate(0);
}

.right:hover::after {
  background: var(--c);
  color: white;
}

/* 其他热度榜特效 */
.right-bottom {
  margin-bottom: 5%;
  position: absolute;
  margin-left: 1.9%;
  width: 289px;
  height: 610px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 5px;
  transition: 0.3s linear;
  z-index: 0;
}

.right-bottom::before {
  content: "";
  width: 200px;
  height: 800px;
  background: var(--c);
  position: absolute;
  z-index: 1;
  animation: rolls 4s linear infinite;
  filter: blur(5px);
  transition: 0.5s linear;
}

.right-bottom::after {
  content: attr(data-text);
  position: absolute;
  color: var(--c);
  font-size: 25px;
  text-align: center;
  line-height: 75px;
  /* background: #333; */
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 5px;
  width: 80%;
  height: 200%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 1s linear;
}

.right-bottom:hover {
  /* opacity: 0.5; */
  box-shadow: 0 0 5px var(--c), 0 0 10px var(--c), 0 0 5px var(--c);
  background: var(--c);
}

.right-bottom:hover::before {
  height: 100%;
  width: 100%;
  animation-play-state: paused;
  filter: hue-rotate(0);
}

.right-bottom:hover::after {
  background: var(--c);
  color: white;
}

/* 主页背景 */
.video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  /* width: 100% !important;
  height: 100% !important; */
  z-index: -9999;
  /*灰色调*/
  /*-webkit-filter:grayscale(100%)*/
  background-size: cover;
}

/* @media screen and (max-width: 500px) {
  div {
    width: 70%;
  }
}
@media screen and (max-device-width: 800px) {
  #bgvid {
    display: none;
  }
} */

/* 主页面最大外层盒子（不包括主页背景的盒子） */
.mainbottom {
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight: 100;
  background: rgba(0, 0, 0, 0.3);
  /* color: white; */
  font-size: 1.2rem;
}

/* 总盒子 */
.app {
  /* position: relative; */
  /* z-index: -1; */
  /* background-color: rgb(22, 21, 31); */
  height: 100%;
}
